<template>
  <div class="content-container">
    <p-form-model ref="fuleForm" layout="inline" :model="form" :rules="rules">
      <p-row :gutter="16">
        <p-col :span="12" style="height: 56px;">
          <p-form-model-item label="法人编号" prop="" style="width: 100%;">
            <span>{{ form.legalNo }}</span>
          </p-form-model-item>
        </p-col>
      </p-row>
      <div v-if="showView" class="view">
        <p-row :gutter="16">
          <p-col :span="12" style="height: 56px;">
            <p-form-model-item label="法人名称" prop="" style="width: 100%;">
              {{ form.legalName }}
            </p-form-model-item>
          </p-col>
          <p-col :span="12" style="height: 56px;">
            <p-form-model-item
              label="付款条件和账期"
              prop=""
              style="width: 100%;"
            >
              {{ form.settlementPeriod }}
            </p-form-model-item>
          </p-col>
        </p-row>
        <p-row :gutter="16">
          <p-col :span="12" style="height: 56px;">
            <p-form-model-item label="客户名称" prop="" style="width: 100%;">
              {{ form.customerName }}
            </p-form-model-item>
          </p-col>
          <p-col :span="12" style="height: 56px;">
            <p-form-model-item label="客户简称" prop="" style="width: 100%;">
              {{ form.name }}
            </p-form-model-item>
          </p-col>
        </p-row>
        <p-row>
          <p-col :span="24" style="height: 56px;">
            <p-form-model-item label="备注" prop="remark" style="width: 100%;">
              {{ form.remark }}
            </p-form-model-item>
          </p-col>
        </p-row>
        <p-form-model-item label="附件" prop="" style="width: 100%;">
          <div
            v-for="item in list"
            :key="item.id"
            class="upload-list"
          >
            <div class="box">
              <a :href="item.atthAccessPath">{{ item.atthName }}</a>
            </div>
          </div>
        </p-form-model-item>
      </div>
      <div v-else class="edit">
        <p-row :gutter="16">
          <p-col :span="12" style="height: 56px;">
            <p-form-model-item
              label="法人名称"
              prop="legalName"
              style="width: 100%;"
            >
              <p-input
                v-model="form.legalName"
                placeholder="请输入"
                @change="asd"
              />
            </p-form-model-item>
          </p-col>
          <p-col :span="12" style="height: 56px;">
            <p-form-model-item
              label="付款条件和账期"
              prop="settlementPeriod"
              style="width: 100%;"
            >
              <p-input
                v-model="form.settlementPeriod"
                placeholder="请输入"
                @input="nameChange"
              />
            </p-form-model-item>
          </p-col>
        </p-row>
        <p-row :gutter="16">
          <p-col :span="12" style="height: 56px;">
            <p-form-model-item
              label="客户名称"
              prop="customerName"
              style="width: 100%;"
            >
              <p-input
                v-model="form.customerName"
                disabled
                placeholder="请选择"
                style="background-color: #fff; cursor: default; color: #000"
              />
              <InputSearch
                class="searchIcon"
                :value="value"
                :is-edit="true"
                @search="visibleCustomer = true"
              />
            </p-form-model-item>
          </p-col>
          <p-col :span="12" style="height: 56px;">
            <p-form-model-item label="客户简称" prop="" style="width: 100%;">
              {{ form.name }}
            </p-form-model-item>
          </p-col>
        </p-row>
        <p-row>
          <p-col :span="24" style="height: 56px;">
            <p-form-model-item label="备注" prop="remark" style="width: 100%;">
              <p-textarea
                v-model="form.remark"
                placeholder="请输入"
                :auto-size="{ minRows: 3, maxRows: 3 }"
              />
              <div v-show="remarkRutes.isShow" class="waring">
                {{ remarkRutes.text }}
              </div>
            </p-form-model-item>
          </p-col>
        </p-row>
        <div style="margin-top: 32px;">
          <p-form-model-item label="附件" prop="" style="width: 100%;">
            <p-button @click="buttonClick"> <p-icon type="upload" /></p-button>
            <p-tooltip
              placement="top"
              title="附件上传的格式：xls,
        xlsx,
        doc,
        docx,
        ppt,
        pptx,
        gif,
        png,
        jpg,
        jpeg
        pdf,
        rar,
        zip,"
            >
              <p-icon
                type="question-circle"
                style="color: blue; margin-left: 15px; font-size: 14px;"
              />
            </p-tooltip>
          </p-form-model-item>
        </div>
        <div v-show="isload" style="margin-left: 110px; margin-top: 10px">
          <p-spin tip="附件上传中" size="small" />
        </div>
        <div style="padding-left: 110px; margin-bottom: 10px;">
          <div v-for="(item, i) in list" :key="item.id" class="upload-list">
            <div class="box">
              <a :href="item.atthAccessPath">{{ item.atthName }}</a>
              <p-icon
                type="delete"
                style="
                color: rgb(24, 144, 255);
                cursor: pointer;
                margin-left: 8px;"
                @click="deleteFile(item, i)"
              />
            </div>
          </div>
        </div>
      </div>
      <p-row :gutter="16" style="margin-top: 26px">
        <p-col v-if="form.createUserName" :span="12" style="height: 56px;">
          <p-form-model-item label="创建人" prop="" style="width: 100%;">
            <span>{{ form.createUserName }}</span>
          </p-form-model-item>
        </p-col>
        <p-col v-if="form.createTime" :span="12" style="height: 56px;">
          <p-form-model-item label="创建时间" prop="" style="width: 100%;">
            <span>{{ form.createTime }}</span>
          </p-form-model-item>
        </p-col>
      </p-row>
      <p-row :gutter="16">
        <p-col v-if="form.createDeptName" :span="12" style="height: 56px;">
          <p-form-model-item label="创建人部门" prop="" style="width: 100%;">
            <span>{{ form.createDeptName }}</span>
          </p-form-model-item>
        </p-col>
        <p-col v-if="form.updateTime" :span="12" style="height: 56px;">
          <p-form-model-item label="修改时间" prop="" style="width: 100%;">
            <span>{{ form.updateTime }}</span>
          </p-form-model-item>
        </p-col>
      </p-row>
      <p-row :gutter="16">
        <p-col v-if="form.updateUserName" :span="12" style="height: 56px;">
          <p-form-model-item label="修改人" prop="" style="width: 100%;">
            <span>{{ form.updateUserName }}</span>
          </p-form-model-item>
        </p-col>
        <p-col v-if="form.updateDeptName" :span="12" style="height: 56px;">
          <p-form-model-item label="修改人部门" prop="" style="width: 100%;">
            <span>{{ form.updateDeptName }}</span>
          </p-form-model-item>
        </p-col>
      </p-row>
    </p-form-model>
    <DialogUserNameList
      :visible.sync="visibleCustomer"
      @change="changeCustomer"
      @number-click="handleNumberClick"
    />
    <DialogUploadCustomer
      ref="upload"
      uptype="legal"
      :list.sync="list"
      :accept="accept"
      :biz-id="formInfo.legalNo"
      :isload.sync="isload"
      @change="handleInsertChange"
    />
  </div>
</template>

<script>
import { getDeleteFile } from '@/api/customerApi';
import DialogUserNameList from '@/components/dialog/DialogUserNameList.vue';
import DialogUploadCustomer from '@/components/dialog/DialogUploadCustomer.vue';

export default {
  components: {
    DialogUserNameList,
    DialogUploadCustomer,
  },
  props: {
    formInfo: {
      type: Object,
      default: () => ({}),
    },
    showView: {
      type: Boolean,
      default: false,
    },
    routeData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      remarkRutes: {
        isShow: false,
        text: '',
      },
      accept: [
        '.pdf',
        '.doc',
        '.docx',
        '.xls',
        '.xlsx',
        '.ppt',
        '.pptx',
        '.jpg',
        '.png',
        '.gif',
        'jpeg',
        '.rar',
        '.zip',
        '.wps',
      ],
      visibleCustomer: false,
      isload: false,
      form: {
        id: '',
        legalNo: '',
        legalName: '',
        settlementPeriod: '',
        name: '',
        customerName: '',
        remark: '',
        customerNo: '',
        createUserName: '',
        createTime: '',
        createDeptName: '',
        updateTime: '',
        updateUserName: '',
        updateDeptName: '',
        customerCode: '',
        attachmentIds: [],
      },
      list: [],
      rules: {
        legalName: [
          {
            required: true,
            message: '请输入法人名称',
            trigger: 'blur',
          },
          {
            min: 1,
            max: 200,
            message: '长度不能超过200个字符',
            trigger: 'blur',
          },
        ],
        customerName: [
          {
            required: true,
            message: '请选择客户名称',
            trigger: 'blur',
          },
        ],
      },
      // uploadList: [],
    };
  },
  computed: {
    rulesRemark() {
      return (this.form.remark && this.form.remark.length > 255) || false;
    },
    // getUploadList() {
    //   debugger
    //   let valList = (this.uploadList.length && this.uploadList) || [];
    //   return [...valList, ...this.list] || [];
    // },
  },
  watch: {
    formInfo: {
      handler(val) {
        if (val) {
          (this.form.id = val.id),
            (this.form.legalNo = val.legalNo),
            (this.form.legalName = val.legalName),
            (this.form.settlementPeriod = val.settlementPeriod),
            (this.form.name = val.name),
            (this.form.customerName = val.customerName),
            (this.form.remark = val.remark);
          this.form.customerNo = val.customerNo;
          this.form.createUserName = val.createUserName;
          this.form.createTime = val.createTime;
          this.form.createDeptName = val.createDeptName;
          this.form.updateTime = val.updateTime;
          this.form.updateUserName = val.updateUserName;
          this.form.updateDeptName = val.updateDeptName;
          if (val.attachmentIds?.length) {
            this.list = [];
            val.attachmentIds?.forEach(item => {
              this.list.push({
                atthName: item.atthName,
                atthAccessPath: item.atthAccessPath,
                id: item.id,
              });
            });
          }
        }
      },
      deep: true,
      immediate: true,
    },
    list: {
      handler(val) {
        if (val) {
          let arr = val?.map(item => {
            return {
              id: item.id,
            };
          });
          // let list = [...new Set(arr)];
          this.form.attachmentIds?.splice(0, this.form.attachmentIds.length);
          if (this.list?.length) {
            this.list?.forEach(v => {
              this.form.attachmentIds?.push({ id: v.id });
            });
          }
          this.form.attachmentIds?.push(...arr);
          // console.log(this.form.attachmentIds,'1q');
        }
      },
      deep: true,
      // immediate: true,
    },
    'form.remark': {
      handler(val) {
        if (!val || val.length < 255) {
          this.remarkRutes.isShow = false;
          this.remarkRutes.text = '';
        }
        if (val.length > 255) {
          this.remarkRutes.isShow = true;
          this.remarkRutes.text = '输入内容过长';
        }
      },
      deep: true,
    },
    routeData: {
      handler(val) {
        if (val.customerName && val.name && val.customerNo) {
          this.form.customerName = val.customerName;
          this.form.name = val.name;
          this.form.customerNo = val.customerNo;
        }
      },
      immediate: true
    }
  },
  methods: {
    clearFile() {
      this.form.attachmentIds = [];
    },
    // 选择客户
    changeCustomer(val) {
      this.form.customerNo = val.code;
      this.form.customerName = val.customerName;
      this.form.name = val.name;
    },
    handleNumberClick(record) {
      // this.$router.push({
      //   path: '/customer-creation',
      //   query: {
      //     id: record.id,
      //   },
      // });
    },
    async deleteFile(item, i) {
      const result = await getDeleteFile(item.id);
      if (result.data.code === 0) {
        this.list.splice(i, 1);
      }
    },
    validate() {
      return new Promise(resolve => {
        this.$refs.fuleForm.validate(valid => {
          resolve(valid);
        });
      });
    },
    buttonClick() {
      this.$refs.upload?.uploader();
    },
  },
};
</script>

<style lang="less" scoped>
.content-container {
  /deep/ .poros-form-inline .poros-form-item > .poros-form-item-label {
    width: 150px;
  }
  /deep/ .poros-col {
    margin-bottom: 10px;
  }
  /deep/.poros-form-item-control-wrapper {
    width: calc(100% - 250px);
  }
  .upload-list {
    display: inline-block;
    margin-right: 16px;
    .box {
      display: flex;
      align-items: center;
    }
  }
  .searchIcon {
    position: absolute;
    top: 3px;
    right: 5px;
  }
  .waring {
    position: absolute;
    top: 18px;
    left: 0px;
    height: 14px;
    color: red;
    font-size: 12px;
    font-weight: 400;
  }
}
</style>
